<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/authChecker.js"></script>
	</head>
	<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
	<link href="//unpkg.com/layui@2.9.22/dist/css/layui.css" rel="stylesheet">
	<!-- 引入 Chart.js -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<style>
		.aaa {
			border-radius: 10px;
			margin: 10px;
			width: 185px;
			height: 80px;
		}

		/* 基础按钮样式 */
		button {
			background-color: #FAFAFA;
			/* 默认背景颜色 */
			color: black;
			/* 文字颜色 */
			padding: 10px 20px;
			/* 内边距 */
			border: none;
			/* 去掉边框 */
			border-radius: 15px;
			/* 圆角 */
			font-size: 16px;
			/* 字体大小 */
			cursor: pointer;
			/* 鼠标指针样式 */
			transition: background-color 0.3s ease;
			/* 添加过渡效果 */
		}

		/* 播放量的初始颜色 */
		button {
			color: #666666;
			/* 播放量的初始颜色 */
		}

		/* 鼠标悬浮时的样式 */
		button:hover {
			background-color: #ff6699;
			/* 悬浮时的背景颜色 */
			color: #ffffff;
			/* 悬浮时的文字颜色 */
		}

		.bordered {
			border-left: 980px solid #fff;
			/* 左边框宽度为5px，颜色为黑色 */
			padding-left: 10px;
			/* 可选：为内容添加左边距 */
		}

		body {
			font-family: Arial, sans-serif;
		}

		.chart-container {
			width: 900px;
			//margin: 20px auto;
			margin-left: 350px;
		}

		#mianbox {
			position: absolute;
			top: 20px;
			left: -300px;
		}
	</style>
	<body>
		<div id="mianbox">
			<div>
				<h3 style="margin-left: 412px;  margin-top: 1px;">核心数据概览<i class="layui-icon layui-icon-tips-fill"
						style="font-size: 20px; color: #C9CCD0;"></i> </h3>
				<table class="bordered">
					<tr>
						<td></td>
						<td>时间选择&nbsp;&nbsp;&nbsp;</td>
						<td>
							<div class="layui-col-md6">
								<select style="border-radius: 8px; padding: 5px; border: 1px solid #ccc;">
									<option value="AAA">发稿后24小时</option>
									<option value="BBB">近七天</option>
									<option value="CCC" selected>发稿后30天</option>
								</select>
							</div>
						</td>
						<td> <!-- 下载按钮 -->&nbsp;&nbsp;&nbsp;
							<img src="
						BM38wJGk5AOAG49L1wAsIJcE/Q9ATAazvGcALgBKU3SJ86k8AkU/oGsbprUxLZchLFdkJn8s14MLIsaa3d1e4GWDBfBMoi6NYQ9o+je7l0BHelhRIoR4DLu4/oo0l31eeWHl0NvF89Q8FIFE1wf0yLP8Vg8Xi+P42eFUyxOxDcf4ZS
						jZF9hGjCfXOEgihGgKBbJX0PaLT6RP0VrvF7ycXBSg85yS9A0HWgnq5oKAdWqBZEZTuvceezAfY0Uy2eEbHgX9s15GB6AdjTqL558awik7TxuxV5hXMaa0qmE8DsaWKU+oSQrtRM1KYM7Tk9lL0AsafxDE96EOEB9ta8zHf5maI+8b
						mgw2Py2JbYCeC3G2Y3yQYZkkGun44dY4/6cF9+JzUMje13PFhguQNyJ93Gi3/ixd9iUrgvv2MSAmILFlgKoG70f8kwxZ9NuG9bsIXfEZXNtHGHl7CgYtM50mG/3Yt3goQZpe+T4EYH2Xakmi9jrjdthignmPvWqWNJXOkzKVKztWsU
						TPHB3IxZCDBvxhtxHGnukqhbCOG8tEtxQWHxFxQBn8Khqg8awh8Q8vskCVBlzMCHFO94ZOpVcne6ySua0O+s5PZE8eHo6e5E1qM/53yoCW+UINkq5N+f0MDDaaEBu0MnYwk72c+EgzhOygwxzALwlgq1j7HYHTpmEoejsQuFGBlCpF
						UoSlBIbczckir1Xia2PHSMaIfjM6bMLhKic5k8S9IC9B89yMTGCFwADwdwN3KngEbiDzH4GMEvB1imqBe7Wr9QcMh9PdyUViEpE8kFBVzuqlva4k1wnMRz8o4PI1DDSVezSV2AwJTekReYFypMep8qqo/OcIMuwJNIexyhfmJehMIQ
						oosRO/AfUo4AFWWwF1WKDZUjAGdcSg3CDL63ydgsKE+F9tYalPtuRhffl4RdRmZLSV99mIURz5uFAPNGF8Dkv0OVq3qcC6mcdKO+xsQOLLeQrFsKOXXlODdCpAu+Cc+mC8CFJoWk66vBvwuiPGFWcB4e0JwQjtYuoop4oimJqSj1D2
						ONv2BElMKa1VY8biTLmObKnN9p0vYd4jXBvy0YCgjZpcXXJESIM3xY3Tc9ynajHL9EP0aYSuAzg2wyPMpaPDNZcddv7yPSS/kOs0CiRV/9BvLhYqap7IIp+Av+xUu8Gtty0AAAAABJRU5ErkJggg=="
								alt="" width="20" height="20" />
							<a href="path/to/your/file.pdf" download class="download-btn"
								style="color: #00AEEC;">导出数据</a>
						</td>
					</tr>
				</table>
				<table style="margin-left: 350px;">
					<tr>
						<td> <button class="aaa" style="border: none;" class="my-button">
								播放量<br />23
							</button></td>
						<td> <button class="aaa" style="border: none;" class="my-button">
								净增粉丝<br />54
							</button></td>
						<td> <button class="aaa" style="border: none;" class="my-button">
								点赞<br />65
							</button></td>
						<td> <button class="aaa" style="border: none;" class="my-button">
								评论<br />66
							</button></td>

						<td> <button class="aaa" style="border: none;" class="my-button">
								分享<br />29
							</button></td>
					</tr>
				</table>
			</div>

			<div class="chart-container">
				<canvas width="800px" height="400px" id="lineChart"></canvas>
			</div>
		</div>


		<script>
			// 在页面加载时立即检查登录状态
			        if (!checkAdminLogin()) {
			            // 登录检查失败，阻止页面继续加载
			            console.log('登录验证失败，已跳转至登录页');
			        } else {
			// 数据
			const data = {
				labels: ["2025/02/11", "2025/02/13", "2025/02/15", "2025/02/17", "2025/02/18"],
				datasets: [{
						label: "总播放量",
						data: [0, 0, 56, 0, 0],
						borderColor: "rgba(255, 102, 153, 1.0)",
						fill: false,
					},
					{
						label: "粉丝播放量",
						data: [0, 3, 10, 9, 2],
						borderColor: "rgba(0, 174, 236, 1.0)",
						fill: false,
					}
				]
			};

			// 配置
			const config = {
				type: "line",
				data: data,
				options: {
					responsive: true,
					plugins: {
						legend: {
							position: "top",
						},
						title: {
							display: true,
							text: "播放量统计"
						}
					},
					scales: {
						y: {
							beginAtZero: true
						}
					},
					// 调整布局，增加左边距
					layout: {
						padding: {
							right: 30 // 向左移动 30px  
						}
					}
				}
			};

			// 创建图表
			const myChart = new Chart(
				document.getElementById("lineChart"),
				config
			);
			}
		</script>
	</body>
</html>